<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="<%=request.getContextPath()%>/css/booklist.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            initBookList(1);
        });

        function initBookList(pageIndex) {
            var bookName = $("#bookName").val();
            var sortId = ${param.sortId};
            ;

            $.getJSON("../BookServlet", {"sortId": sortId, "bookName": bookName, "pageIndex": pageIndex}, showBooks);
        }

        function showBooks(data) {
            var list = $("#bookList").empty();
            $(data.data).each(function () {
                var iSBNStr = (this.ISBN.length > 6) ? this.ISBN.substring(0, 6) + "..." : this.ISBN;
                var bookNameStr = (this.bookName.length > 4) ? this.bookName.substring(0, 4) + "..." : this.bookName;
                var htmlStr = "<ul> <li id=\"tit\"> <input type=\"checkbox\" name=\"selectBook\" value=\"" + this.id + "\" /></li>" +
                    "<li>" + this.id + "</li>" +
                    "<li>" + bookNameStr + "</li>" +
                    "<li>" + iSBNStr + "</li>" +
                    "<li>" + this.bookAuthor + "</li>" +
                    "<li>" + this.bookSort + "</li>" +
                    "<li>" + this.bookSortName + "</li>" +
                    "<li>" + this.bookPub + "</li>" +
                    "<li>" + this.bookPubLocation + "</li>" +
                    "<li>" + this.bookPubYear + "</li>" +
                    "<li>" + this.bookTotal + "</li>" +
                    "<li id=\"caoz\"><a href=\"#\" onclick=\"deleteBooks(" + this.id + ")\"> <img src=\"../image/del.gif\" width=\"16\" height=\"16\" />删除</span></a>" +
                    "</li></ul>";
                list.append(htmlStr);
            });

            //分页
            var pageDiv = $("#ztai2").empty();

            htmlStr = "<div id=\"tji\">&nbsp;&nbsp;共有 " + data.totalCount + "条记录，当前第 " + data.currPageNo + "/" + data.totalPageCount + "</div>";
            htmlStr += "<div id=\"fpg\"><ul>";
            if (data.currPageNo > 1) {
                htmlStr += "<li><input type=\"image\" src=\"../image/first.gif\" onclick=\"initBookList(1)\"/></li>";
                htmlStr += "<li><input type=\"image\" src=\"../image/back.gif\" onclick=\"initBookList(" + (data.currPageNo - 1) + ")\"/></li>";
            }
            if (data.currPageNo < data.totalPageCount) {
                htmlStr += "<li><input type=\"image\" src=\"../image/next.gif\" onclick=\"initBookList(" + (data.currPageNo + 1) + ")\"/></li>";
                htmlStr += "<li><input type=\"image\" src=\"../image/last.gif\" onclick=\"initBookList(" + (data.totalPageCount) + ")\"/></li>";
            }
            htmlStr += "<li>转到第</li>" +
                "<li id=\"page\"><input type=\"text\" value=\"\" name=\"iname\" class=\"iname\" id=\"pageNo\"/></li>" +
                "<li id=\"page\">页</li>" +
                "<li id=\"zhuan\"><input type=\"image\" src=\"../image/go.gif\" onclick=\"goToPage()\"/></li>" +
                "</ul>" +
                "</div>" +
                "</div>";
            pageDiv.append(htmlStr);
        }

        function goToPage() {
            initBookList($("#pageNo").val());
        }

        function search() {
            initBookList(1);
        }

        /*批量选中*/
        function selectAll(obj) {
            if ($(obj).is(':checked')) {
                $("input:checkbox").each(function () {
                    $(this).prop("checked", true);
                })

            } else {
                $("input:checkbox").each(function () {
                    $(this).prop("checked", false);
                })
            }
        }

        /*批量删除*/
        function deleteBooks(id) {
            var idList = [];//定义一个空数组
            if (typeof (id) == "undefined") {
                //批量删除
                if (confirm("您确定要批量删除吗？")) {
                    $("input[name='selectBook']:checked").each(function (i) {//把所有被选中的复选框的值存入数组
                        idList[i] = $(this).val();
                    });
                } else {
                    return;
                }
            } else {
                if (confirm("请确定要删除该书籍吗？")) {
                    //删除指定的书籍
                    idList[0] = id;
                } else {
                    return;
                }
            }
            $.ajax({
                type: 'post',
                url: '../deleteBook',
                dataType: 'json',
                traditional: true,
                data: {"ids": idList},
                success: function (data) {
                    alert(data.message);
                    if (data.result == 1) {
                        initBookList(1);
                    }
                }
            });
        }

    </script>
</head>
<body style="background:#fff;">
<div class="list">

    <div id="ztai">
        <form action="">
            <div id="cx">
                <ul>
                    <li>书籍名称：</li>
                    <li id="wenben"><input type="text" id="bookName"/></li>
                    <li><input type="button" value="查询" class="ann" onclick="search()"/></li>
                </ul>
            </div>
        </form>
        <div class="ins">
            <ul>
                <a href="bookinfoadd.jsp" target="_self">
                    <li id="dele">新增</li>
                </a>
                <a href="" onclick="deleteBooks()">
                    <li>批量删除</li>
                </a>
            </ul>
        </div>
    </div>

    <ul id="biti">
        <li id="tit"><input type="checkbox" name="selectall" value="" onclick="selectAll(this)"/></li>
        <li>序号</li>
        <li>书籍名称</li>
        <li>ISBN</li>
        <li>书籍著者</li>
        <li>分类号</li>
        <li>分类名称</li>
        <li>出版单位</li>
        <li>发行地</li>
        <li>出版时间</li>
        <li>馆藏数</li>
        <li id="caoz">基本操作</li>
    </ul>
    <div id="bookList">
        <!--书籍列表-->
    </div>
    <div id="ztai2">
        <!--分页-->
    </div>
</div>
</body>
</html>
